<template>
  <div class="app-container oneSearchNoFooter">
    <div class="customContainer ">
      <div class="customHeader">
        <div class="bottom_box_total">
          <div style="margin-bottom:10px">杂项出库明细表</div>
          <span style="margin-left:6px;"> 出库类型：{{type_out | sundryType}} </span> 
        </div>

      </div>

      <!-- 搜索头 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline sundry_form" size="small" >
        <dj-store-select :category="585" :defaultStore="formInline.store_id" :needItem="true" @change="selectStoreChanged" />
        <el-form-item>
          <el-date-picker v-model="pickerDate" value-format="yyyy-MM-dd" type="daterange" align="right" unlink-panels range-separator="-"
            start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <dj-button size="small" @search="searchClick" />
        </el-form-item>
      </el-form> 
      <!-- 表格 --> 
      <el-table highlight-current-row :data="list" v-loading.body="listLoading" border size="small">
        <el-table-column align="center" label="序号">
          <template slot-scope="scope">
            <b>{{scope.$index + 1}}</b>
          </template>
        </el-table-column> 
        <el-table-column align="center" label="图片" width="80">
          <template slot-scope="scope">
            <img :src="scope.row.thumb" width="60" height="60" alt="">
          </template>
        </el-table-column>
        <el-table-column align="center" label='礼品名称' prop="gift_name"></el-table-column>
        <el-table-column align="center" label="礼品编号" prop="gift_id"></el-table-column>
        <el-table-column align="center" label="神采编号" prop="no_obsolete"></el-table-column>
        <el-table-column align="center" label="出库时间" prop="creat_time"></el-table-column>
        <el-table-column align="center" label='成本价（元）'>
          <template slot-scope="scope">
            <!-- 保留小数 -->
            {{scope.row.money_cost|keepTwoNum}}
          </template>
        </el-table-column>  
        <el-table-column align="center" label="出库数量（个）" prop="num"></el-table-column>
        <el-table-column align="center" label="出库金额（元）" prop="out_money">
          <template slot-scope="scope">
            <!-- 保留小数 -->
            {{scope.row.out_money|keepTwoNum}}
          </template>
        </el-table-column> 
      </el-table>

    </div>
    <!-- 自定义底部 -->
    <div class="bottom_box" v-if="list">
      <span class="pull-right mt10" style="font-size:14px;color:#606266">　出库数量合计：{{returnNum}}&#x3000;&#x3000;&#x3000;　　
        <span style="padding-left:20px">
          出库金额合计：{{returnMoney|keepTwoNum}}
        </span>
        &#x3000;&#x3000;</span>
    </div>
  </div>
</template>
<script>
import { getList} from '@/api/report/sundryOutput_detail';
import { pickerOptionsF, pickerDateF, optionMaxTime, getDateString } from '@/utils'; 
import { DjStoreSelect } from '@/components/store';
export default {
  components: { 
    'dj-store-select': DjStoreSelect
  },
  data() {
    return {
      global: {
        storeName: '',
        begin_time: '',
        end_time: ''
      },
      tableColumns: [
        {
          label: '序号',
          dtcol: 'index'
        },
        {
          label: '时间',
          dtcol: 'time'
        },
        {
          label: '出库数（个）',
          dtcol: 'unitsshipped',
          isnum: true,
          link: 'report/storeDay_ditail'
        },
        {
          label: '出库金额（元）',
          dtcol: 'money_cost',
          isnum: true,
          link: 'report/storeDay_ditail'
        }
      ],
      list: [],
      listLoading: false,
      formInline: {
        store_id: this.$store.getters.optionId,
        begin_time: '',
        end_time: '',
        look_del: '0',
        type:'',
      },
      pickerOptions: pickerOptionsF(-1),
      pickerDate: pickerDateF(-1,-1),
      returnNum: 0,
      returnMoney: 0,
      type_out:'',
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      //当进入组件之前，执行 beforRouteEnter 路由钩子函数 ,//参数vm就是当前组件的实例。
      vm.beforeComingIn();
    });
  },
  watch: {
    pickerDate: function() {
      this.global.begin_time = this.pickerDate[0];
      this.global.end_time = this.pickerDate[1];
    }
  },
  methods: {
    beforeComingIn() {
      if (this.$route.query.routerflag) {
        // console.log(67,this.$route.query)
        let col = this.$route.query.col;
        // 本月第一天至昨天
        
        let fist_day = this.$route.query.global.begin_time;
        let yesterday = this.$route.query.global.end_time;
        this.pickerDate = [fist_day, yesterday];
        this.formInline.store_id = this.$route.query.global.store_id;
        this.type_out = col 
        // 1:报废出库:scrap_money,3:办公领用:work_money,4:公关领用:relation_money,6:总部领用:headquarters_money,7:辅助用品:assist_money,12:生日领用:birthday_money 
      
        if(col == 'assist_money') {
          this.formInline.type = '7'
        } else if(col == 'work_money') {
          this.formInline.type = '3'
        } else if(col == 'relation_money') {
          this.formInline.type = '4'
        } else if(col == 'headquarters_money') {
          this.formInline.type = '6'
        } else if(col == 'birthday_money') {
          this.formInline.type = '12'
        } else if(col == 'scrap_money') {
          this.formInline.type = '1'
        } 
        
        this.searchClick();
      } else {
        if (!this.list || this.list.length == 0) {
          this.searchClick();
        }
      }
    },
    selectStoreChanged(obj, item) {
      // console.log(item)
      for (let key in obj) this.formInline[key] = obj[key];
      this.global.storeName = item.name;
      this.searchClick();
    },
    // 搜索
    searchClick() {
      optionMaxTime(this.pickerDate).then(() => {
        //最大可选择时间区间
        this.formInline.begin_time = this.pickerDate ? this.pickerDate[0] : '';
        this.formInline.end_time = this.pickerDate ? this.pickerDate[1] : '';
        this.fetchData();
      });
    },
    // 列表获取
    fetchData() {
      this.listLoading = true; 
      this.returnNum = 0
      this.returnMoney = 0
      getList(this.formInline)
        .then(response => {  
          if(!response) this.list = []
          else this.list = response.data;   
          let list = this.list
          if(list.length > 0) {
            this.returnNum = 0;
          this.returnMoney = 0;  
            for(let key in list) {
              this.returnNum += parseInt(list[key].num)
              this.returnMoney += parseFloat(list[key].out_money)
            }
          }
          this.listLoading = false;
        })
        .catch(res => {
          this.listLoading = false;
        });
    }
  },
  filters:{
    sundryType(value) {
      if(value == 'assist_money') {
        return '辅助用品出库'
      } else if(value == 'work_money') {
        return '办公领用出库'
      } else if(value == 'relation_money') {
        return '公关领用出库'
      } else if(value == 'headquarters_money') {
        return '总部领用出库'
      } else if(value == 'birthday_money') {
        return '生日领用出库'
      } else if(value == 'scrap_money') {
        return '报废出库'
      }
    }, 
  } 
};
</script>
<style scoped>
.cell a {
  color: #409eff;
}
.bottom_box_total { 
  font-size: 14px;
  color: #606266;
}
.sundry_form {
  margin-top: 20px;
}
</style> 